<template>
  <div class="components-container">
    <div class="filter-container">
      <el-date-picker
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"
        style="width: 360px;"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="tableQuery.gender"
        clearable
        placeholder="性别"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in gender"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.channel"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in channel"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.customer_group"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in customer_group"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.age"
        clearable
        placeholder="年龄结构"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in age"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.education"
        clearable
        placeholder="学历"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in education"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.credit"
        clearable
        placeholder="信用评分范围"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in credit"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.risk"
        clearable
        placeholder="风险等级"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in risk"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.risk"
        clearable
        placeholder="天数分层"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in day_interval"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <div style="display: flex;justify-content: flex-end;margin-bottom: 12px;">
      <el-button-group>
        <el-button
          size="mini"
          @click="status = 'month'"
          :type="status === 'month' ? 'primary' : ''"
          >月</el-button
        >
        <el-button
          size="mini"
          @click="status = 'day'"
          :type="status === 'day' ? 'primary' : ''"
          >日</el-button
        >
      </el-button-group>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        :label="status === 'month' ? '月迁移率' : '日迁移率'"
        prop="create_time"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M0' : 'D0'"
        prop="channel"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M0-M1' : 'D0-D1'"
        prop="customer_group"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M1-M2' : 'D1-D2'"
        prop="age"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M2-M3' : 'D2-D3'"
        prop="education"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M3-M4' : 'D3-D4'"
        prop="gender"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M4-M5' : 'D4-D5'"
        prop="credit"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M5-M6' : 'D5-D6'"
        prop="risk"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="status === 'month' ? 'M6-M6+' : 'D6-D6+'"
        prop="normal_repayment"
        align="center"
      ></el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="tableQuery.current_page"
        :page-sizes="[10, 20, 30]"
        :page-size="tableQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const defaultPage = {
  limit: 10,
  current_page: 1
}
const defaultQuery = {
  name: '',
  call_type: ''
}
const defaultCreateQuery = {
  name: '',
  desc: '',
  data_table: '',
  call_type: '',
  is_retry: false
}
// import s from './compoment/search'
export default {
  components: {},
  data() {
    return {
      status: 'month',
      tableQuery: Object.assign({}, defaultQuery, defaultPage),
      total: null,
      gender: [
        {
          type: 1,
          name: '男'
        },
        {
          type: 2,
          name: '女'
        }
      ],
      channel: [
        {
          type: 1,
          name: 'A'
        },
        {
          type: 2,
          name: 'B'
        }
      ],
      customer_group: [
        {
          type: 1,
          name: '新客'
        },
        {
          type: 2,
          name: '老客'
        }
      ],
      age: [
        {
          type: 1,
          name: '0～22'
        },
        {
          type: 2,
          name: '23～30'
        },
        {
          type: 3,
          name: '31～40'
        },
        {
          type: 4,
          name: '41～50'
        },
        {
          type: 5,
          name: '50+'
        }
      ],
      education: [
        {
          type: 1,
          name: '无学历'
        },
        {
          type: 2,
          name: '小学'
        },
        {
          type: 3,
          name: '初中'
        },
        {
          type: 4,
          name: '高中'
        },
        {
          type: 5,
          name: '本科'
        },
        {
          type: 6,
          name: '硕士'
        },
        {
          type: 7,
          name: '博士'
        },
        {
          type: 8,
          name: '其它'
        }
      ],
      credit: [
        {
          type: 1,
          name: '400以内'
        },
        {
          type: 2,
          name: '401～500'
        },
        {
          type: 3,
          name: '501～600'
        },
        {
          type: 4,
          name: '601～700'
        },
        {
          type: 5,
          name: '701～800'
        },
        {
          type: 6,
          name: '801～900'
        },
        {
          type: 7,
          name: '901+'
        }
      ],
      risk: [
        {
          type: 1,
          name: 'A'
        },
        {
          type: 2,
          name: 'B'
        },
        {
          type: 3,
          name: 'C'
        },
        {
          type: 4,
          name: 'D'
        },
        {
          type: 5,
          name: 'E'
        }
      ],
      day_interval: [
        {
          type: 1,
          name: '0'
        },
        {
          type: 2,
          name: '1'
        }
      ],
      num: 783000,
      success: 500000,
      fail_num: 283000,
      suc: '80%',
      fail: '20%',
      titlealert: '',
      tableData: [
        {
          create_time: '2019-10-9',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-10',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-11',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-12',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-13',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-14',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-15',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        },
        {
          create_time: '2019-10-16',
          channel: '96.83%',
          customer_group: '96.83%',
          age: '96.83%',
          education: '96.83%',
          gender: '96.83%',
          credit: '96.83%',
          risk: '96.83%',
          normal_repayment: '96.83%'
        }
      ],
      tableLoading: true,

      createdItem: Object.assign({}, defaultCreateQuery),
      actionType: 'add',
      formVisible: false,
      formSubmiting: false
    }
  },
  created: function() {
    // console.log(this.search)
  },
  computed: {},
  mounted() {},
  methods: {
    handleFilter() {
      this.tableQuery.current_page = 1
      this.getList()
    },
    handleReset() {
      this.tableQuery = Object.assign({}, defaultQuery)
      this.getList()
    },
    handleSizeChange(val) {
      this.tableQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.tableQuery.current_page = val
      this.getList()
    },
    downloand() {
      console.log('下载')
    }
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
